import React, {Component} from "react";
import {SongListContainer} from "./SongList.css";

class SongList extends Component{
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <SongListContainer>
                {
                    this.props.songs.map(e=>
                        <SongItem key={e.id} name={e.name} artists={e.artists}/>
                    )
                }
            </SongListContainer>

        )
    }
}

class SongItem extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <div></div>
                <div>
                    <p>{this.props.name}</p>
                    <p>{this.props.artists[0]?.name}</p>
                </div>
                <div>
                    <button onClick={()=>{console.log("item被点了")}
                    }>点击播放</button>
                </div>
            </div>
        );
    }
}

export default SongList;